<!DOCTYPE html>
<html>
	<head>
		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3419308738737930"
		     crossorigin="anonymous"></script>
		<meta charset="utf-8">
		<title>千千万能工具箱-在线思维导图</title>
		<link
		  rel="stylesheet"
		  href="../js/element2.4.7/index.css"
		/>
		
			<script src="../js/jquery.min.js"></script>
				
			
		<script src="../js/html2canvas.min.js"></script>
		<script src="../js/vue2.6.11/vue.js"></script>
		<script src="../js/element2.4.7/index.js"></script>
	</head>
	<body>
	<div id="app">

          <iframe v-if="iframeShow" id="iframeMind" src="./mind.html" width="100%" height="550" style="border: 0px;" name="mind"></iframe>
<br/>
<br/>
<div>
<el-row v-if="!show">
  <el-col :span="4" :offset="8"><el-input v-model="input" placeholder="请输入根节点"></el-input></el-col>
  <el-col :span="6" :offset="1">  <el-button type="primary" @click="generateData">生成根节点</el-button></el-col>

</el-row>
<el-row v-if="show">
  <el-col :span="12"  style="text-align: center;"><el-button type="danger" @click="reset">重置思维导图</el-button></el-col>
  <el-col :span="12" style="text-align: center;">  <el-button type="success" @click="downLoad">下载思维导图</el-button></el-col>

</el-row>
		</div>
			</div>

	
			<script>
				const baseUrl = "https://api.lqcpws.cn"
				// var iframe = window.frames['mind'];
				
				const app = new Vue({
					el:'#app',
				data:{
				
						title :'hello',
			            show:true,
						iframeShow:false,
						input:"",
						treeList:[
							{ "id": "root", "isroot": true, "topic": "腾讯科技有限公司" },
							{ "id": "sub1", "parentid": "root", "topic": "天美工作室",  "direction": "left" },
							{ "id": "sub12", "parentid": "sub1", "topic": "王者荣耀"},
							{ "id": "sub121", "parentid": "sub1", "topic": "天天酷跑",  },
							{ "id": "sub122", "parentid": "sub1", "topic": "cf手游",  },
				
										    
							{ "id": "sub2", "parentid": "root", "topic": "光子工作室",  "direction": "right" },
							{ "id": "sub21", "parentid": "sub2", "topic": "和平精英",  },
	
										    
							{ "id": "sub3", "parentid": "root", "topic": "拳头公司",  "direction": "right" },
							{ "id": "sub31", "parentid": "sub3", "topic": "英雄联盟",  },
				
										    
							{ "id": "sub341", "parentid": "sub31", "topic": "剑圣"},
							{ "id": "sub342", "parentid": "sub31", "topic": "亚索"},
							{ "id": "sub343", "parentid": "sub31", "topic": "永恩"},
							{ "id": "sub344", "parentid": "sub31", "topic": "剑姬"},
						]
					
				},
				methods:{
					downLoad(){
						var iframe = window.frames['mind']
						console.log(iframe.document.getElementById("mind"))
						
						html2canvas(iframe.document.getElementById("mind"),{
						  scale: 2, // 缩放因子，可自定义，例如设置为2表示截图分辨率为原始大小的两倍
						  useCORS: true, // 启用跨域支持，如果需要截图包含跨域图片则必须设置为 true
						  allowTaint: true, // 允许截取有 taint（污染）标记的画布，提高截图质量
						}).then(function(canvas) {
						  // 将 canvas 转换为 base64 编码的图片数据
						  var imageData = canvas.toDataURL('image/png');
						  
						  // 在页面中展示截图
						var link = document.createElement('a');
						link.href = imageData;
						link.download = 'mind.png';
						link.style.display = 'none';
						document.body.appendChild(link);
						link.click();
						document.body.removeChild(link);
						});
					},
					generateData(){
						if(this.input==undefined||this.input.trim()==""){
							alert('根节点名称不能为空！')
							return;
						}
						this.treeList.push({ "id": "root", "isroot": true, "topic": this.input })
						this.show=true
						this.loadIframe()
					},
					reset(){
						this.input=""
						this.show=false
						this.treeList=[]
						this.loadIframe()
					},
					  requestCount() {
					  	// let ys=	LZString.compressToBase64(JSON.stringify(nes.toJSON()))
					  	// 	console.log(JSON.parse(LZString.decompressFromBase64(ys)))
					  	let _this = this
					  	$.ajax({
					  		type: 'get',
					  		url: baseUrl + "/pc/requestCountByDay",
					  		success: function(res) {
					  
					  
					  		}
					  
					  
					  	})
					  
					  },
					  loadIframe(){
						    this.iframeShow=false;
							
							 setTimeout(function(that){
							 							  
							 							  that.iframeShow=true;
							 },10,this)
						  setTimeout(function(that){
							  
							  var iframe = window.frames['mind'];
							  iframe.treeList=that.treeList
						  },10,this)
					  },
					  loadTips(){
						     this.$notify.info({
						            title: '友情提示',
						            message: '鼠标放在节点上，右键打开操作面板',
									duration:5000
						          });
					  }
				},
				mounted(){
	      		// console.log('---')
				this.loadTips()
				this.loadIframe()
		 			   this.requestCount()
					   
				}
				});
		
				
			</script>
		</body>
	</html>